<template>
  <div class="d2-page-cover">
    <el-card class="box-card">
      <el-row slot="header" type="flex" justify="space-between">
        <el-col :span="8"><span>管理员信息</span></el-col>
        <el-col v-if="!editing" :span="4"><el-button type="primary" size="mini" icon="el-icon-edit" @click="editOrCancel"></el-button></el-col>
        <el-row v-if="editing" :span="8">
          <el-button type="danger" size="mini" icon="el-icon-check" @click="save"/>
          <el-button size="mini" icon="el-icon-close" @click="editOrCancel"/>
        </el-row>
      </el-row>
      <el-form inline label-position="left" label-width="60px"> 
        <el-form-item label="用户名">
          <el-input placeholder="" v-model="username" :disabled="true"/>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input placeholder="" v-model="!editing ? phone: tmpPhone" :disabled="!editing"/>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input placeholder="" v-model="!editing ? email: tmpEmail" :disabled="!editing"/>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from '@/plugin/axios'
import qs from 'qs'
import { async } from 'q';

export default {
  data () {
    return {
      editing: false,
      tmpPhone: '',
      tmpEmail: ''
    }
  },
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ]),
    username () {
      return this.info.name.username
    },
    phone () {
      return this.info.name.phone
    },
    email () {
      return this.info.name.email
    }
  },
  methods: {
    editOrCancel () {
      this.tmpPhone = this.phone
      this.tmpEmail = this.email
      this.editing = !this.editing
    },
    save () {
     /*  axios.post("", qs.stringify({
            user_id: this.info.name.id,
            phone: this.tmpPhone,
            email: this.tmpEmail
          })).then( async data => {
            
          }) */
    }, 
  }
}
</script>

<style lang="scss" scoped>
.d2-page-cover {
  @extend %full;
  @extend %unable-select;
  display: flex;
  flex-flow: column nowrap;
  
  .d2-page-cover__logo {
    img {
      width: 200px;
    }
  }
  .d2-page-cover__title {
    margin: 0px;
    margin-bottom: 20px;
    font-weight: bold;
    color: $color-text-main;
  }
  .d2-page-cover__sub-title {
    margin: 0px;
    margin-bottom: 5px;
    color: $color-text-normal;
  }
  .d2-page-cover__build-time {
    margin: 0px;
    margin-bottom: 10px;
    font-size: 12px;
    color: $color-text-placehoder;
  }
}

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
    align-items: center;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 350px;
    margin: 20px;
  }
</style>
